<template>
    <van-nav-bar title="购物车" left-text="返回" left-arrow @click-left="$router.back()" placeholder fixed />
    <van-row align="center" justify="end" class="row" v-for="item in cartArr" :key="item.cartid">
        <van-col span="2"><van-checkbox v-model="item.flag" style="margin-left: 10px;"
                @change="selectOneFn(item.cartid, item.flag)"></van-checkbox>
        </van-col>
        <van-col span="22">
            <van-swipe-cell>
                <van-card :price="item.originprice" :title="item.proname" class="goods-card" :thumb="item.img1">
                    <template #footer>
                        <van-stepper v-model="item.num" @plus="cartNumAddFn(item.cartid, item.num)"
                            @minus="cartNumSubFn(item.cartid, item.num)" />
                    </template>
                </van-card>
                <template #right>
                    <van-button square text="删除" type="danger" class="delete-button"
                        @click="cartDeleteFn(item.cartid)" />
                </template>

            </van-swipe-cell>
        </van-col>
    </van-row>
    <van-submit-bar :price="countPrice" button-text="提交订单" @submit="onSubmit">
        <!-- <van-checkbox v-model="type">全选</van-checkbox> -->
        <van-checkbox v-model="type" @click="allCheckedFn()">全选</van-checkbox>
        <template #tip>
            你的收货地址不支持配送, <span @click="onClickLink">修改地址</span>
        </template>
    </van-submit-bar>
    <van-tabbar v-model="active" route placeholder fixed>
        <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
        <van-tabbar-item icon="apps-o" to="/cate">分类</van-tabbar-item>
        <van-tabbar-item icon="cart-o" to="/cart" :badge="cartArr.length">购物车</van-tabbar-item>
        <van-tabbar-item icon="contact-o" to="/my">我的</van-tabbar-item>
    </van-tabbar>
</template>

<script setup>
import { cartDeleteReq, cartSelectAllReq, cartSelectOneReq, cartUpdateNumReq } from '@/api/cart';
import { loadCartList, cartArr } from '@/store/cart';
// import axios from 'axios';
import { ref, computed, watchEffect } from 'vue';
// let cartArr = ref([]);
let active = ref(0);
// let userid = localStorage.getItem('userid');
// let token = localStorage.getItem('token');
// 渲染购物车列表
// async function loadCartList() {
//     let r = await axios.post("http://localhost:3001/api/cart/list", { userid }, { headers: { token } });
//     if (r.data.data) {
//         cartArr.value = r.data.data;
//         // console.log(cartArr.value);
//     } else {
//         cartArr.value = [];
//     }
//     isAllSelectFn();
// }
loadCartList();


// 修改单选状态
function selectOneFn(cartid, flag) {
    cartSelectOneReq(cartid, flag)
        .then((r) => {
            console.log(r.data);
            loadCartList();
        })
}
// 全选
let type = ref(false);
function allCheckedFn() {
    // type.value = !type.value;
    cartSelectAllReq(type.value)
        .then((r) => {
            console.log(r.data);
            loadCartList();
        })
}
// 判断是否全选
watchEffect(
    function () {
        if (cartArr.value == []) {
            type.value = false;
        } else {
            type.value = cartArr.value.every(v => v.flag);
        }
    }
)

// 计算总价
let countPrice = computed(function () {
    let r = cartArr.value.filter(v => v.flag)
        .reduce((sum, v) => {
            return sum + v.originprice * v.num * 100
        }, 0);
    return r;
})
// 删除订单
function cartDeleteFn(cartid) {
    cartDeleteReq(cartid)
        // axios.post("http://localhost:3001/api/cart/remove", { cartid }, { headers: { token } })
        .then((r) => {
            console.log(r.data);
            loadCartList();
        })
}
// 提交订单
function onSubmit() {
    console.log("提交");
}
//修改数量
function cartNumAddFn(cartid, num) {
    num++;
    cartUpdateNumReq(cartid, num).then(() => loadCartList())
}
function cartNumSubFn(cartid, num) {
    num--;
    cartUpdateNumReq(cartid, num).then(() => loadCartList())
}
</script>

<style scoped>
.row {
    background-color: #F7F8FA;
}

.delete-button {
    height: 100%;
}

.van-submit-bar {
    bottom: 50px;
}
</style>